<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            border:1px solid #75adf8;
            display:grid ;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: masonry;
            grid-gap: 10px;
            width:940px ;
        }

        img{
            width:220px;
            height:auto ;
        }
    </style>
    <div class = "container">
        <img src = "./imgs/大海001.jpg" alt = "" />
        <img src = "./imgs/大海002.jpg" alt = "" />
        <img src = "./imgs/大海003.jpg" alt = "" />
        <img src = "./imgs/大海004.jpg" alt = "" />
        <img src = "./imgs/大海005.jpg" alt = "" />
        <img src = "./imgs/大海006.jpg" alt = "" />
        <img src = "./imgs/大海007.jpg" alt = "" />
        <img src = "./imgs/大海008.jpg" alt = "" />
        <img src = "./imgs/大海009.jpg" alt = "" />
        <img src = "./imgs/大海010.jpg" alt = "" />
        <img src = "./imgs/大海011.jpg" alt = "" />
        <img src = "./imgs/大海012.jpg" alt = "" />
    </div>
</head>
<body>


</body>
</html>
